<template>
    <div class="sysm-b-modu boxsi ml50 mr50" :style="'height: '+viewHeight+'px;'">
        
        <div class="sysm-bmodu-box">
            <div class="pl24 pr24 h100p">

                <h3 class="sysm-bmbox-pageh3">验证身份</h3>

                <ul class="sysm-yzsf-box clearfix">
                    <li class="sysm-yzsfbox-left fl">
                        <div class="fr">
                            <h4 class="sysm-bmbox-pageh4">现场采集头像</h4>
                            <div class="xxtbwel-tuser-image">
                                <div class="xxtbwel-tuimage-box"><img :src="showImgPath1" width="100%" height="100%"  alt="" /></div>
                            </div>
                        </div>
                    </li>
                    <li class="sysm-yzsfbox-center fl">
                        <div :class=" sfzState == 0 ? 'sysm-yzsfcenter-box animate-box' : sfzState == 1 ? 'sysm-yzsfcenter-box load-true' : 'sysm-yzsfcenter-box'" @click="clickToggle()"><!-- animate-box class为旋转识别动画 load-true class为加载匹配成功 -->
                            <p>100%</p>
                            <p>匹配度</p>
                        </div>
                    </li>
                    <li class="sysm-yzsfbox-right fl">
                        <h4 class="sysm-bmbox-pageh4">系统头像</h4>
                        <div class="xxtbwel-tuser-image">
                                <div class="xxtbwel-tuimage-box"><img :src="showImgPath2" width="100%" height="100%"  alt="" /></div>
                        </div>
                    </li>
                </ul>

                <div class="sysm-brbox-bom text-ac pore-box">
                    <p class="sysm-brbbom-false" v-show="sfzState == 2">{{errorTxt}}</p>
                    <p class="sysm-brbbom-false" style="color: rgb(120, 255, 74);" v-show="sfzState == 1">{{errorTrueTxt}}</p>
                    <a href="javascript:;" class="sysm-brbbom-btn" v-show="sfzState == 1"  @click="toRouter('hsryxx')">核对信息</a>
                    <a href="javascript:;" class="sysm-brbbom-btn true-obj ml50" v-show="sfzState == 2" @click="toRouter('sgdj')" >手工登记</a>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import {getShowImgPath} from '@/utils'
export default {
    data(){
        return {
            viewHeight : 504,
            sfzState : 0,//0匹配中 1 匹配成功 2 匹配失败
            errorTxt : '身份验证失败，所填信息正确',
            errorTrueTxt : '身份验证通过，所填信息正确',
            showImgPath1:'',
            showImgPath2:'',
            userInfo:{}
        }
    },
    created(){
        this.userInfo=this.vtp.get("userInfo");
        console.log("this.userInfo",this.userInfo)
        this.showImgPath1 = this.userInfo.avatar;
        this.showImgPath2 = this.userInfo.idcardPhoto;
        this.showImgPath1 = getShowImgPath(this.showImgPath1);
        this.showImgPath2 = getShowImgPath(this.showImgPath2);
    },
    methods:{
        clickToggle(){
            if(this.sfzState == 0){
                this.sfzState = 1;
            }else if(this.sfzState == 2){
                this.sfzState = 0;
            }else{
                this.sfzState = 2;
            }
        },
        toRouter(o){
            this.vtp.toRouter(this,o);
        }
    },
    mounted(){
        this.viewHeight = this.vtp.winHei(166);
        window.onresize = function(){
            let pageHeiVal = tipLayout.winHei()-166;
            $('.sysm-b-modu').height(pageHeiVal);
        }
    }
}
</script>

<style>

</style>